<template>
  <div class="container examination">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumbConfig=breadcrumbConfig></breadcrumb>
    <!--    <breadcrumb></breadcrumb>-->
    <!-- 面包屑导航 -->
    <div class="content">
      <h2>审批流设置</h2>
      <h3>数据筛选</h3>
<!--      <form-filed class="search-form" :formconfig="searchFormConfig.formconfig" :formData="searchFormConfig.formData" @formDataval="dialogClick" ref="formAttr"/>-->
      <div>
        <el-form :inline="true" :model="searchForm" ref="rulesForm" class="search-form">
          <el-form-item label="审批流名称" prop="name">
            <el-input
                v-model="searchForm.name"
                size="small"
                placeholder="请输入审批流名称"
                filterable
                clearable
                maxlength="20"
                show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="适用部门" prop="orgCode">
            <el-cascader v-model="searchForm.orgCode" :show-all-levels="false" :options="orgCodeList" :props="{ label: 'orgName', value: 'orgCode', children: 'children',checkStrictly: true }" size="small" placeholder="请选择适用部门"></el-cascader>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" plain size="small" @click="fetchData('search')">查询</el-button>
          <el-button
              type="primary"
              size="small"
              plain
              @click="fetchData('reset')"
          >重置</el-button>
        </el-form-item></el-form>
      </div>
    </div>
    <div class="content">
      <h3>审批流列表<el-button type="primary" @click="toOtherPages('examinationProcessDetails')">新增</el-button></h3>
      <lb-table
          :column="columns"
          :data="page.list"
          pagination
          align="center"
          :total="page.totalNum"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30, 50]"
          :current-page.sync="page.currentPage"
          :page-size="page.pageSize"
          @size-change="handleSizeChange"
          @p-current-change="handleCurrentChange"
      >
      </lb-table>
    </div>
    <!--========================== el-dialog =================================-->
    <!--      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">-->
    <!--        <el-table :data="gridData">-->
    <!--          <el-table-column property="date" label="日期" width="150"></el-table-column>-->
    <!--          <el-table-column property="name" label="姓名" width="200"></el-table-column>-->
    <!--          <el-table-column property="address" label="地址"></el-table-column>-->
    <!--        </el-table>-->
    <!--      </el-dialog>-->
    <!--=========================== el-dialog end================================-->
  </div>

</template>

<script>
import formFiled from '@/components/form/index'
import breadcrumb from '@/components/breadcrumb'
import LbTable from '@/components/lb-table/lb-table'

// import mixinsCommon from '../../mixins/common.js'

export default {
  // mixins: [mixinsCommon],
  components: {
    formFiled,
    breadcrumb,
    LbTable
  },
  data () {
    return {
      dialog: { visible: false, title: '编辑', type: '' },
      page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      breadcrumbConfig: {
        list: [
          {
            title: '审核管理',
            type: '#ff0000',
            path: '/'
          },
          {
            title: '审批流设置',
            type: '1',
            path: ''
          }
        ]
      },
      searchForm: {
        name: '', // 	审批流名称 	body 	false 	string
        orgCode: ''// 	适用部门 	body 	false 	string
      },
      // rulesFrom: { name: [{ max: 20, message: '最长可输入 20 个字符', trigger: 'blur' }] },
      orgCodeList: [],
      columns: [
        { label: '序号', type: 'index', width: '60' },
        { label: '审批流名称', prop: 'name', minWidth: '200', align: 'left' },
        { label: '适用部门', prop: 'orgName', minWidth: '200', align: 'left' },
        { label: '指定功能', prop: 'funcName', minWidth: '200', align: 'left' },
        { label: '备注', prop: 'remarks', minWidth: '200', align: 'left' },
        { label: '必审', prop: 'mustLabel', align: 'left' },
        {
          label: '状态',
          width: '100',
          align: 'left',
          render: (h, scope) => {
            return (
              <div>
                <p class={scope.row.status === 1 ? 'success' : 'danger'}>{scope.row.statusLabel}</p>
              </div>
            )
          }
        },
        { label: '提交时间', prop: 'createdTime', width: '200', align: 'left' },
        {
          label: '操作',
          width: '200',
          align: 'right',
          fixed: 'right',
          render: (h, scope) => {
            return (
              <div>
                <el-link type='primary' size='mini' type='primary' onClick={() => { this.toOtherPages('examinationProcessDetails', scope.row.id, 'edit') }}>编辑</el-link>
                <el-link type='primary' size='mini' type='danger' onClick={() => { this.onDeleteProcess(scope.row) }}>删除</el-link>
              </div>
            )
          }
        }]
    }
  },
  created () {
    this.fetchData()
    this.getOrgCodeList()
  },
  watch: {
    $route: {
      handler (newRouter) {
        const refresh = newRouter.query.refresh
        if (refresh == 1) {
          this.fetchData()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 显示  dialog
    showDialog (title, type, row) {
      this.dialog.type = type
      this.currentRow = row
    },
    fetchData (type) {
      if (type === 'reset') {
        // this.$refs['searchForm'].resetFields()
        this.searchForm.name = ''
        this.searchForm.orgCode = ''
        this.page.pageNo = 1
        this.page.pageSize = 10
        this.page.currentPage = 1
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      if (type === 'search') {
        const searchForm = this.searchForm
        params = Object.assign(params, searchForm)
        if (searchForm.orgCode) {
          params.orgCode = searchForm.orgCode[searchForm.orgCode.length - 1]
        }
        // 去除字符串 前后 空格
        for (const item in params) { if (typeof params[item] === 'string') { params[item] = params[item].trim() } }
      }
      this.$api.processPageList(params).then((res) => {
        if (res.code === 0) {
          // if (res.data.list) { this.page.list = res.data.list }
          this.page.list = res.data.list
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCurrentChange (currentChange) {
      this.page.pageNo = currentChange
      this.fetchData()
    },
    handleSizeChange (sizeChange) {
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.fetchData()
    },
    getOrgCodeList () {
      const paramsVersion = { 'request': { 'orgName': '', 'orgType': '' }, 'version': '' }
      this.$api.orgTreeList(paramsVersion).then((res) => {
        this.orgCodeList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 删除
    onDeleteProcess (row) {
      this.$confirm('是否删除该审批流？删除后已设置该审批流立即生效?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = { id: row.id }
        this.$api.processDelete(params).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        console.log('已取消删除', row)
      })
    },
    // 页面跳转
    toOtherPages (name, parameter, type) {
      let query = { id: parameter, type }
      if (type === 'category') { query = { category: parameter, type } }
      this.$router.push({ name, query })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-button {border: none;}
/deep/.el-table th > .cell, /deep/.el-table td{ text-align: unset;}

/deep/.el-table__row td .cell span, /deep/.el-table__row td .cell div p{
  display: block;
  //overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
.content{
  h3{
    button{
      float: right;
      width: 120px;
      height: 36px;
      background-color: #4168E7;
      border-radius: 4px;
      font-weight: 16px;
    }
  }
}
/deep/.el-table td.el-table__cell div .el-link{
    padding: 0 5px;
}
</style>
